<template>
  <div class="position-requirement">
    <div class="header">
      <router-link to="/main/renshi/zhaoping/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>职位要求</h2>
    </div>

    <el-form :model="formData" label-width="120px" class="requirement-form">
      <el-form-item label="职位名称">
        <el-input v-model="formData.positionName"></el-input>
      </el-form-item>
      
      <el-form-item label="部门">
        <el-input v-model="formData.department"></el-input>
      </el-form-item>
      
      <el-form-item label="工作职责">
        <el-input type="textarea" v-model="formData.duties" rows="4"></el-input>
      </el-form-item>
      
      <el-form-item label="任职要求">
        <el-input type="textarea" v-model="formData.requirements" rows="4"></el-input>
      </el-form-item>
      
      <el-form-item label="学历要求">
        <el-select v-model="formData.education">
          <el-option label="大专" value="大专"></el-option>
          <el-option label="本科" value="本科"></el-option>
          <el-option label="硕士" value="硕士"></el-option>
          <el-option label="博士" value="博士"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="工作经验">
        <el-input v-model="formData.experience"></el-input>
      </el-form-item>
      
      <el-form-item label="薪资范围">
        <el-input v-model="formData.salaryRange"></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="saveData">保存</el-button>
        <el-button @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        positionName: '',
        department: '',
        duties: '',
        requirements: '',
        education: '',
        experience: '',
        salaryRange: ''
      }
    }
  },
  methods: {
    saveData() {
      // TODO: 保存数据到后端
      this.$message.success('保存成功')
      this.goBack()
    },
    goBack() {
      this.$router.push('/main/renshi/zhaoping/process')
    }
  }
}
</script>

<style lang="scss" scoped>
.position-requirement {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .requirement-form {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }
}
</style> 